<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title all-teacher-title">
        <h2 class="fl tac">
          <span class="c-333">全部讲师</span>
        </h2>
        <section class="c-tab-title">
          <a id="subjectAll" title="全部" href="#">全部</a>
        </section>
      </header>
      <section class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <section v-if="teacher.total == 0" class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam"
              >没有相关数据，小编正在努力整理中...</span
            >
          </section>
          <!-- /无数据提示 结束-->
          <article v-if="teacher.total > 0" class="i-teacher-list">
            <ul class="of">
              <li v-for="item in teacher.recodes" :key="item.id">
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a :href="'/teacher/' + item.id" :title="item.name">
                      <img
                        :src="item.avatar?item.avatar:'https://edu-lin-110.oss-cn-chengdu.aliyuncs.com/%E5%82%B2%E5%A8%87.jpg'"
                        :alt="item.name"
                        width="142"
                        height="142"
                      />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      :href="'/teacher/' + item.teacherId"
                      :title="item.name"
                      class="fsize18 c-666"
                      >{{ item.name }}</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999">{{ item.career }}</span>
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{ item.intro }}</p>
                  </div>
                </section>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>
        <!-- 公共分页 开始 -->
        <div>
          <div class="paging">
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a
              :class="{ undisable: !teacher.hasPrevious }"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)"
              >首</a
            >
            <a
              :class="{ undisable: !teacher.hasPrevious }"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(teacher.current - 1)"
              >&lt;</a
            >
            <a
              v-for="page in teacher.pages"
              :key="page"
              :class="{
                current: teacher.current == page,
                undisable: teacher.current == page,
              }"
              href="#"
              :title="'第' + page + '页'"
              @click.prevent="gotoPage(page)"
              >{{ page }}</a
            >
            <a
              :class="{ undisable: !teacher.hasNext }"
              href="#"
              title="后一页"
              @click.prevent="gotoPage(teacher.current + 1)"
              >&gt;</a
            >
            <a
              :class="{ undisable: !teacher.hasNext }"
              href="#"
              title="末页"
              @click.prevent="gotoPage(teacher.pages)"
              >末</a
            >
            <div class="clear"></div>
          </div>
        </div>
        <!-- 公共分页 结束 -->
      </section>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>

<script setup lang="ts">
import { ResOptions, Teacher } from '~~/types/types';
const userStore = useUserStore()

const { public: { apiBase } } = useRuntimeConfig()
const { data } = await useFetch(`${apiBase}preschool/teachers/1/8`, {
  // @ts-ignore
  pick: ['result'],
  headers: {
    Authorization: userStore.getToken,
    LoginType: 'User'
  }
})
const recodes = (data.value as ResOptions<Teacher>).result
const teacher = recodes as Teacher
const gotoPage = async (page: number) => {
  const res = await http.get(`preschool/teachers/${page}/8`)
  console.log(res);
  Object.assign(teacher,res)
  console.log(teacher);
  
}
</script>

<style scoped></style>